$primary: #01a0ff!default;
$white: #ffffff!default;
$second-text: #999!default;
$background: #f8f8f8!default;
$red: #ed4622!default;
.index{
    width: 100%;
    overflow: hidden;
    .logo{
        width: 400px;
        height: 80px;
        background-size: 200px 40px;
        margin: 0 auto;
        padding-top: 100px;
        display: block;
        animation: logo 2s forwards 0.5s;
        opacity: 0;
    }    
    @keyframes logo {
        0% {
            opacity: 0;
            transform: translate(50%,0);
        }
        100% {
            opacity: 1;
            transform: translate(0,0);
        }
    }
    @keyframes button {
        0% {
            opacity: 0;
            transform: translate(0,50%);
        }
        100% {
            opacity: 1;
            transform: translate(0,0);
        }
    }
    .cloud{
        width: 150px;
        height: 100px;
        right: 0%;
        position: absolute;
        top: 560px;
        animation: cloud 7s infinite 0.5s;
        opacity: 0;
    }
    @keyframes cloud {
        0% {
            right: 0%;

            opacity: 0.3;
        }
        100% {
            right: 80%;

            opacity: 1;
        }
    }
    .cloud1{
        width: 200px;
        height: 100px;
        right: 0%;
        position: absolute;
        top: 130px;
        animation: cloud2 16s infinite 1s;
    }
    @keyframes cloud2 {
        0% {
            right: 0%;
        }
        100% {
            right: 100%;
        }
    }
    .button{
        display: flex;   
        padding: 40px;
        animation: button 2s forwards 1.5s;
        opacity: 0;
        position:absolute;
        width:100%;
        box-sizing:border-box;
        bottom:120px;

    }
    .about-us{
        border-radius: 40px;
        border:1px solid $primary;
        padding: 20px 0;
        line-height: 40px;
        height: 40px;
        width: 50%;
        text-align: center;
    }
    .about-us:last-child{
        color:$primary;
        margin-left: 80px;

    }
    .about-us:first-child{
        color:$white;
        background: $primary;
    }

    .airplane{
        position: absolute;
        top: 10px;
        left: 0;
        width: 160px;
        height: 160px;
        animation: airplane 8s infinite 0s;
    }
    @keyframes airplane {
        0% {
            left: 0;
            opacity: 1;
        }
        30% {
            left: 60%;
            opacity: 0.9;
        }
        50% {
            left: 90%;
            opacity: 0;
        }
        100% {
            left: 90%;
            opacity: 0;
        }
    }


    .pig{
        position: absolute;
        top: 180px;
        left: 10px;
        width: 180px;
        height: 180px;
        animation: pig 4s infinite;
    }
    @keyframes pig {
        0% {
            transform: translate(0px,0px);
        }
        50% {
            transform: translate(0,40px);
        }
        100% {
            transform: translate(0px,0px);            
        }
    }

    .talk{
        position: absolute;
        top: 170px;
        right: 20px;
        width: 300px;
        height: 300px;
        animation: talk 1s forwards 5s;
        opacity: 0;
        Image{
            width: 300px;
            height: 300px;
        }
        .instruction{
            position: absolute;
            top:20px;
            left: 60px;
            width: 200px;
            font-size: 26px;
            color:$primary;
        }
    }

    @keyframes talk {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .boss{
        position: absolute;
        top: -100%;
        right: -100%;
        width: 180px;
        height: 200px;
        animation: boss 5s forwards 1.5s;
        transform: scale(0,0);
    }
    @keyframes boss {
        0% {
            left: 20%;
            top: 20%;
            transform: scale(0,0);
        }
        100% {
            left: 40%;
            top: 30%;
            transform: scale(1,1);
        }
    }
}